<template>
  <div class="classManage-main">
    <div class="ClassManage">
      <ul class="classManage">
        <one-of-class :things="things" @EditInformation="getEditInformation"/>
      </ul>
      <div class="bottom">
        <BottomOfAssessment :totalPages="totalPages" />
      </div>
    </div>
    <div class="Edit">
      <Edit ref="editComponent"/>
    </div>
    <div class="addClass">
      <AddClass/>
    </div>
  </div>
</template>

<script>
import TopOfClassManage from "./TopOfClassManage.vue";
import BottomOfAssessment from "./BottomOfAssessment.vue";
import OneOfClass from "./OneOfClass.vue";
import Edit from "./Edit.vue";
import AddClass from "./AddClass.vue";
import { computed } from "vue";
import { serverAddress } from "../js/config";
import axios from "axios";
export default {
  components: { TopOfClassManage, BottomOfAssessment, OneOfClass, Edit, AddClass },
  name: "ClassManage",
  data() {
    return {
      totalPages: null,
      things: null,
      pageNow:1,
    };
  },
  created() {
    /* var url=`${serverAddress}/courseManage/getCoursePage/1`; */
    var url = "https://mock.apifox.com/m2/3662090-0-default/139532534?pageNo=1";
    axios({
      url: url,
      method: "GET",
    })
      .then((response) => {
        this.pageNow=1;
        console.log(response.data);
        this.totalPages = response.data.data.pageSum;
        this.things = response.data.data.coursePages;
      })
      .catch((error) => {
        console.log("网络错误,无法获取信息");
      });
  },
  methods: {
    refresh(){
      console.log(this.pageNow);
      if(this.pageNow===1){
        this.$forceUpdate();
      }else{
        this.gotoPage(this.pageNow);
      }
    },
    gotoPage(page) {
      /* var api=`${serverAddress}/courseManage/getCoursePage?pageNo=${page}`; */
      var api = `https://mock.apifox.com/m2/3662090-0-default/139532534?pageNo=${page}`;
      axios({
        url: api,
        method: "GET",
      })
        .then((response) => {
          if (response.data.code === 1) {
            this.pageNow=page;
            console.log(response.data);
            this.things = response.data.data.coursePages;
            this.totalPages = response.data.data.pageSum;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((error) => {
          console.log("网络错误,无法获取信息");
        });
    },
    getEditInformation(data){
      console.log(data);
      this.$refs.editComponent.OldEditInformation(data);
      console.log(1);
    }
  },
};
</script>

<style>
.classManage-main {
  height: 600px;
}
.Edit {
  overflow-y: auto; /* 让内容溢出时显示垂直滚动条 */
  max-height: 300px;
  border: 1px solid rgb(236, 228, 233);
  background-color: rgba(240, 245, 250, 0.7); /* 浅色背景色 */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(223, 209, 218, 0.1); /* 添加轻微阴影 */
  width: 320px; /* 使用整个宽度 */
  padding: 20px; /* 添加一些内边距 */
  position: relative;
  left: 805px;
  top: -560px;
  height: 225px;
}
.addClass{
  border: 1px solid rgb(236, 228, 233);
  overflow-y: auto; /* 让内容溢出时显示垂直滚动条 */
    max-height: 300px;
  background-color: rgba(240, 245, 250, 0.7); /* 浅色背景色 */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(223, 209, 218, 0.1); /* 添加轻微阴影 */
  width: 320px; /* 使用整个宽度 */
  padding: 20px; /* 添加一些内边距 */
  position: relative;
  left: 805px;
  top: -535px;
  height: 260px;
}
.bottom {
  width: 95%;
  max-width: 950px;
  margin: 30px auto;
  position: absolute;
  top: 80%;
}

.classManage {
  list-style: none;
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}

.ClassManage {
  background-color: rgba(240, 245, 250, 0.7); /* 浅色背景色 */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(223, 209, 218, 0.1); /* 添加轻微阴影 */
  width: 700px; /* 使用整个宽度 */
  max-width: 1100px; /* 设置最大宽度 */
  padding: 20px; /* 添加一些内边距 */
  position: relative;
  left: 40px;
  top: 30px;
  height: 550px;
}
</style>